<template>
	<div >
		<div>
			<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">选科信息</span>
				</Col>
				<Affix :offset-top="20" style="z-index: 10;position: absolute;right: 3%;">
					<Tooltip content="返回上一页" theme="light">
						<Button @click="btnback" style="right: 6%;z-index: 100;" type="ghost" shape="circle" icon="iconfont alicon-back_android_light"></Button>
					</Tooltip>
				</Affix>
			</Row>

			<Row style="padding:35px 40px 0px 45px;width: 80%;">
				<Col span="24" style="text-align: left;width: 15%;">
				<span style="font-size: 14px;font-weight: 700;">入学年份：</span>
				<span style="font-size: 14px;">{{xkpkyear}}</span>
				</Col>
				<Col span="24" style="text-align: left;width: 15%;">
				<span style="font-size: 14px;font-weight: 700;">校&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
				<span style="font-size: 14px;">{{xkpkschool}}</span>
				</Col>
				<Col span="24" style="text-align: left;width: 15%;">
				<span style="font-size: 14px;font-weight: 700;">年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<span style="font-size: 14px;">{{xkpkgrade}}</span>
				</Col>
				<Col span="24" style="text-align: left;width: 30%;">
				<span style="font-size: 14px;font-weight: 700;">起止时间：</span>
				<span style="font-size: 14px;">{{xkpkstarttime}}~{{xkpkendtime}}</span>
				</Col>
			</Row>
			
			<Row style="padding:35px 40px 0px 45px;">
				<Col span="24" style="text-align: left;">
				<span style="font-size: 14px;font-weight: 700;">选科组合：</span>
				<span style="font-size: 14px;" v-for="item in combinationList" :key="item.combinationid">{{item.combination}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				</Col>
			</Row>

		</div>
		<div style="border-bottom: 1px #CCCCCC solid;margin:40px 45px;"></div>
		<Row style="padding:0px 40px 0px 45px;">
			<Col span="24" style="text-align: left;">
			<RadioGroup v-model="xkpkradio" type="button" @on-change="xkpkradioselect">
				<Radio v-for="item in xkpkradioList" :key="item.value" :label="item.value">{{item.label}}</Radio>
			</RadioGroup>
			</Col>

		</Row>
		<div v-if="this.xkpkradio==1?true:false">
			<Row style="padding:35px 40px 0px 45px;width: 100%;">
				<Col span="24" style="text-align: left;display: inline-block;">
				<span style="font-size: 14px;font-weight: 700;">选科状态：
				<CheckboxGroup v-model="xkpkcheckbox" @on-change="xkpkcheckboxselect" style="display: inline-block;font-size: 24px;">
					<Checkbox v-for="item in xkpkcheckboxList" :key="item.value" :label="item.value" style="display: inline-block;font-size: 14px;margin: 0 10px;">{{item.label}}</Checkbox>
				</CheckboxGroup>
				</span>
				<span style="margin: 0 10px 0 20px;">选科班级：</span>
				<Select v-model="xkpkclass" @on-change="xkpkclassChange" style="width: 130px;text-align: center;">
					<Option v-for="item in xkpkclassList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				<span style="margin: 0 10px 0 30px; ">选科科目：</span>
				<Select v-model="xkpkcombination" @on-change="combinationChange" style="width: 130px;text-align: center;">
					<Option v-for="item in combinationList" :value="item.combinationid" :key="item.combinationid">{{item.combination}}</Option>
				</Select>
				<Input v-model="xkpksearch" type="text" placeholder="请输入关键词" style="margin: 0 5px 0 30px; text-align: center; width: 150px;position: relative;"></Input>
				<Button type="primary" @click="search">搜索</Button>
				<div style="display: inline-block;position: relative;float: right;top: 5px; margin-right: 20px;">
					<Tooltip content="导入" theme="light">
						<Button @click="daoru" icon="iconfont alicon-daoru"></Button>
					</Tooltip>
					<Tooltip content="导出" theme="light">
						<Button @click="daochu" icon="iconfont alicon-daochu"></Button>
					</Tooltip>
				</div>
				</Col>
			</Row>

			<div style="min-height: 300px; padding-bottom:20px ;border-bottom: 1px solid #CCCCCC;">
				<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
					<Col span="3" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">序号</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">姓名</span>
					</Col>
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">学号</span>
					</Col>
					<Col span="3" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">校区</span>
					</Col>
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">行政班级</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">选科状态</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">初选科目</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">终选科目</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">操作</span>
					</Col>
				</Row>
				<Row v-for="item in xkpkdetailList" :key="item.detailId" style="margin:0 auto;margin:20px 45px 5px 45px;">
					<Col span="3" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">{{item.detailId}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">{{item.detailName}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">{{item.detailNum}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">{{item.detailSchool}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 15%;">
					<span style="font-size: 16px;">{{item.detailClass}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">{{item.detailState}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">{{item.detailFirstChoice}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<span style="font-size: 16px;">{{item.detailFinalChoice}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 10%;">
					<a  style="font-size: 16px;" @click="xkpkedit">编辑&nbsp;</a>
					</Col>

					</Col>
				</Row>
			</div>
			<div style="text-align: center;display: block;width: 100%;">
				<Page :page-size="pageSize" style="display: inline-block;margin: 15px auto; width: 80%; text-align: right;" :current="current" :total="recordCount" @on-change="pageChange" />
				<span style="display: inline-block;float: left;line-height: 32px; padding: 15px 0 15px 45px;">共有{{recordCount}}条记录</span>
			</div>
		</div>
		<div v-if="this.xkpkradio==2?true:false">
			<Row style="margin-top: 20px;margin-bottom:20px;text-align: left;padding: 0px 40px 0px 45px;">
				<Col span="6">
				<span>选科数目：</span>
				<Select v-model="xkpksubnumselect" @on-change="xkpksubnumselectChange" style="width: 150px;text-align: center;">
					<Option v-for="item in xkpksubnumList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
				<Col span="6">
				<span>班级：</span>
				<Select v-model="xkpkclass" @on-change="xkpkclassChange" style="width: 150px;text-align: center;">
					<Option v-for="item in xkpkclassList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				</Col>
			</Row>
			<Row style="padding-left: 45px;padding-top: 20px;">
				<Col span="12" style="text-align: left;width: 45%;">
				<div style="display: inline-block;width: 7px;height: 7px;background-color: rgb(81, 126, 219);"></div>
				<span style="font-size: 16px;font-weight: 800;margin-left: 5px;">选科人数情况</span>
				<div id="myChart" ref="pie" :style="{width: '95%', height: '450px'}"></div>
				</Col>
				<Col span="12" style="text-align: left;width: 45%;">
				<div style="display: inline-block;width: 7px;height: 7px;background-color: rgb(81, 126, 219);"></div>
				<span style="font-size: 16px;font-weight: 800;margin-left: 5px;">各科人数占比</span>
				<div id="myChart1" ref="pie1" :style="{width: '95%', height: '450px'}"></div>
				</Col>
			</Row>
			<Row style="padding-left: 45px;padding-top: 20px;width: 100%;">
				<Col span="12" style="text-align: left;width: 100%;">
				<div style="display: inline-block;width: 7px;height: 7px;background-color: rgb(81, 126, 219);"></div>
				<span style="font-size: 16px;font-weight: 800;margin-left: 5px;">各科人数数量</span>
				<Row style="text-align: left;margin-top: 5px;margin-bottom: 50px;width: 100%;">
					<div id="myChart2" ref="bar" :style="{width: '95%', height: '450px'}"></div>
				</Row>
				</Col>
			</Row>
			<Row style="padding-left: 45px;padding-top: 20px;width: 100%;">
				<Col span="12" style="text-align: left;width: 20%;">
				<div style="display: inline-block;width: 7px;height: 7px;background-color: rgb(81, 126, 219);"></div>
				<span style="font-size: 16px;font-weight: 800;margin-left: 5px;">各科选科男女占比</span>
				</Col>
				<Col span="12" style="text-align: left;width: 33.3%;">
					<div id="man" style="border: 1px solid #000000; display: inline-block;width: 12px;height: 12px;background-color:#97B2E9;" @click="changeman"></div>
					<span  style="font-size: 16px;font-weight: 800;margin-left: 5px;">男生</span>
					<div id="woman" style=" border: 1px solid #000000;display: inline-block;width: 12px;height: 12px;background-color:#0077AA;" @click="changewoman"></div>
					<span style="font-size: 16px;font-weight: 800;margin-left: 5px;">女生</span>
				</Col>
			</Row>
			<Row style="padding-left: 45px;padding-top: 20px;">
				<div style="width: 33.3%;margin-top:40px ; display: inline-block;float: left;" v-for="item in proList" :key="item.value">
					<span style="display: inline-block;float: left;width: 20%;">{{item.value}}:</span>
					<Col style="text-align: left; width: 80%;float: left;">
					<div class="progressContainer" v-if="show">
						<div class="progress" :style="{width:item.pro1+'%'}">
							<b>{{item.pro1}}%</b>
						</div>
					</div>
					<div class="progressContainer" style="margin-top: 10px;" v-if="show1">
						<div class="progress2" :style="{width:item.pro2+'%'}">
							<b>{{item.pro2}}%</b>
						</div>
					</div>
					</Col>
				</div>
			</Row>
			<Row style="padding-left: 45px;padding-top: 40px;width: 100%;">
				<Col span="12" style="text-align: left;width: 20%;">
				<div style="display: inline-block;width: 7px;height: 7px;background-color: rgb(81, 126, 219);"></div>
				<span style="font-size: 16px;font-weight: 800;margin-left: 5px;">各科选科男女占比</span>
				</Col>
			</Row>
			<div style="min-height: 300px;">
				<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
					<Col span="3" style="text-align: center;width: 14%;">
					<span style="font-size: 16px;">条目</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">物理</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">历史</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">政治</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">生物</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">地理</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">化学</span>
					</Col>
					<Col span="4" style="text-align: center;width: 14%;">
					<span style="font-size: 16px;">合计</span>
					</Col>
				</Row>
				<Row v-for="item in xkpkzbList" :key="item.value" style="margin:0 auto;margin:20px 45px 5px 45px;">
					<Col span="3" style="text-align: center;width: 14%;">
					<span style="font-size: 14px;">{{item.itemId}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 14px;">{{item.wuli}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 14px;">{{item.lishi}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 14px;">{{item.zhengzhi}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 14px;">{{item.shengwu}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 14px;">{{item.dili}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 14px;">{{item.huaxue}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 14%;">
					<span style="font-size: 14px;">{{item.heji}}&nbsp;</span>
					</Col>

					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>

<script>
	import { setlocalstorage, setsessionstorage, removesessionstorage, removelocalstorage } from "@/components/js/Localstorage.js"
	export default {
		data() {
			return {
				xkpkzbList:[
				{	value:1,
					itemId:"报选人数|占比",
					shengwu:"115人|15.86%",
					wuli:"191人|19.55%",
					huaxue:"172人|17.61%",
					lishi:"165人|16.89%",
					dili:"158人|16.17%",
					zhengzhi:"136人|13.92%",
					heji:"997人|100%",
				},
				{ 	value:2,
					itemId:"男生人数|占比",
					shengwu:"67人|52.86%",
					wuli:"113人|60.17%",
					huaxue:"99人|53.61%",
					lishi:"71人|43.61%",
					dili:"63人|39.14%",
					zhengzhi:"27人|19.63%",
					heji:"440人|40.9%",
				},
				{	value:3,
					itemId:"女生人数|占比",
					shengwu:"48人|47.14%",
					wuli:"74人|39.83%",
					huaxue:"73人|46.39%",
					lishi:"94人|56.39%",
					dili:"95人|60.86%",
					zhengzhi:"109人|80.37%",
					heji:"557人|59.1%",
				}
				],
				show:true,
				show1:true,
				progress:30,
				proList: [{
						value: "物化生",
						pro1: 37,
						pro2: 63
					},
					{
						value: "政历地",
						pro1: 81,
						pro2: 19
					},
					{
						value: "物化政",
						pro1: 55,
						pro2: 45
					},
					{
						value: "物化地",
						pro1: 66,
						pro2: 34
					},
					{
						value: "物政地",
						pro1: 29,
						pro2: 71
					},
					{
						value: "历生化",
						pro1: 39,
						pro2: 61
					},
					{
						value: "历地化",
						pro1: 58,
						pro2: 42
					},
					{
						value: "历生政",
						pro1: 59,
						pro2: 41
					},
					{
						value: "历化政",
						pro1: 73,
						pro2: 27
					},
				],
				xkpksubnumselect: "",
				classSelect: 1,
				ajaxHistoryData: [],
				xkpkradio: 1,
				xkpkcheckbox: [1],
				xkpkclass: 1,
				xkpksubject: 1,
				xkpkcombination: 1,
				xkpksearch: "",
				current: 1,
				recordCount: 0, //总条数
				pageSize: 10,
				//				cash: [], //临时存储数组
				combinationList: [{
					combinationid: 1,
					combination: "物化生"
				}, {
					combinationid: 2,
					combination: "历地政"
				}, {
					combinationid: 3,
					combination: "物化地"
				}],
				xkpkradioList: [{
					value: 1,
					label: "选科明细",
				}, {
					value: 2,
					label: "选科统计",
				}],
				xkpkcheckboxList: [{
						value: 1,
						label: "合格",
					},
					{
						value: 2,
						label: "有调整",
					},
					{
						value: 3,
						label: "未选科",
					},
				],
				xkpksubnumList: [{
						value: 11,
						label: "历史"
					},
					{
						value: 12,
						label: "地理"
					},
					{
						value: 13,
						label: "政治"
					},
					{
						value: 14,
						label: "生物"
					},
					{
						value: 15,
						label: "化学"
					},
					{
						value: 16,
						label: "物理"
					},
					{
						value: 17,
						label: "历地政"
					},
					{
						value: 18,
						label: "物化生"
					},
					{
						value: 19,
						label: "物化地"
					},
				],
				xkpkclassList: [{
						value: 1,
						label: "1班"
					},
					{
						value: 2,
						label: "2班"
					},
					{
						value: 3,
						label: "3班"
					},
					{
						value: 4,
						label: "4班"
					},
					{
						value: 5,
						label: "5班"
					},
				],
				xkpkdetailList: [{

						detailId: "01",
						detailName: "王思蕲",
						detailNum: "20190101",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "02",
						detailName: "孙圣时",
						detailNum: "20190102",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "03",
						detailName: "陈润瑜",
						detailNum: "20190103",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "04",
						detailName: "陈宇辉",
						detailNum: "20190104",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "05",
						detailName: "陈冠旭",
						detailNum: "20190105",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "06",
						detailName: "于悦",
						detailNum: "20190106",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "07",
						detailName: "林涛",
						detailNum: "20190107",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "08",
						detailName: "刘陈渝",
						detailNum: "20190108",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "历地政",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "09",
						detailName: "魏旭垚",
						detailNum: "20190109",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "10",
						detailName: "孙浩然",
						detailNum: "20190110",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "11",
						detailName: "陈宇佳",
						detailNum: "20190111",
						detailSchool: "本校区",
						detailClass: "2班",
						detailState: "未选",
						detailFirstChoice: "",
						detailFinalChoice: "",
					},
					{

						detailId: "12",
						detailName: "张兆晗",
						detailNum: "20190112",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "13",
						detailName: "陈嘉炫",
						detailNum: "20190113",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "14",
						detailName: "陈桢衍",
						detailNum: "20190114",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "15",
						detailName: "张宇煌",
						detailNum: "20190115",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "16",
						detailName: "吴孟欣",
						detailNum: "20190116",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "17",
						detailName: "吴宇晖",
						detailNum: "20190117",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "",
						detailFinalChoice: "",
					},
					{

						detailId: "18",
						detailName: "龚春霖",
						detailNum: "20190118",
						detailSchool: "本校区",
						detailClass: "5班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "19",
						detailName: "陈怀睿",
						detailNum: "20190119",
						detailSchool: "本校区",
						detailClass: "4班",
						detailState: "已选",
						detailFirstChoice: "历地政",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "20",
						detailName: "鄢宇桓",
						detailNum: "20190120",
						detailSchool: "本校区",
						detailClass: "3班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "物化生",
					},
					{

						detailId: "21",
						detailName: "卢泽洋",
						detailNum: "20190121",
						detailSchool: "本校区",
						detailClass: "1班",
						detailState: "已选",
						detailFirstChoice: "物化生",
						detailFinalChoice: "历地政",
					},
					{

						detailId: "22",
						detailName: "高钰涵",
						detailNum: "20190122",
						detailSchool: "本校区",
						detailClass: "2班",
						detailState: "未选",
						detailFirstChoice: "",
						detailFinalChoice: "",
					},
				],
				pie: {
					//										title: {
					//											text: '选科总人数',
					//										},
					tooltip: {
						trigger: 'item',
						formatter: "{c}人 ({d}%)\n{b}"
					},
					legend: {
						// orient: 'vertical',
						// top: 'middle',
						bottom: 10,
						left: 'center',
						//						data: ['西凉', '益州', '兖州', '荆州', '幽州']
					},
					graphic: [

						{
							type: 'group',
							left: 'center',
							bottom: '10%',
							children: [{
								type: 'text',
								z: 100,
								left: 'center',
								top: 'middle',
								style: {
									fill: '#333',
									text: [
										'选科总人数：997人'
									],
									font: '14px Microsoft YaHei'
								}
							}]
						}
					],
					series: [{
						type: 'pie',
						radius: '50%',
						center: ['50%', '50%'],
						selectedMode: 'single',
						labelLine: {
							normal: {
								length: 20, // 改变标示线的长度
								length2: 70, // 改变标示线的长度
								lineStyle: {
									color: "#CCCCCC" // 改变标示线的颜色
								}
							},
						},
						label: {
							formatter: '{c}人 ({d}%)\n{b}'

						},
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				pie1: {
					//										title: {
					//											text: '选科总人数',
					//										},
					tooltip: {
						trigger: 'item',
						formatter: "{c}人 ({d}%)\n{b}"
					},
					legend: {
						// orient: 'vertical',
						// top: 'middle',
						bottom: 10,
						left: 'center',
						//						data: ['西凉', '益州', '兖州', '荆州', '幽州']
					},
					graphic: [

						{
							type: 'group',
							left: 'center',
							bottom: '10%',
							children: [{
								type: 'text',
								z: 100,
								left: 'center',
								top: 'middle',
								style: {
									fill: '#333',
									text: [
										'总人数：997人'
									],
									font: '14px Microsoft YaHei'
								}
							}]
						}
					],
					series: [{
						type: 'pie',
						radius: '50%',
						center: ['50%', '50%'],
						selectedMode: 'single',
						labelLine: {
							normal: {
								length: 20, // 改变标示线的长度
								length2: 70, // 改变标示线的长度
								lineStyle: {
									color: "#CCCCCC" // 改变标示线的颜色
								}
							},
						},
						label: {
							formatter: '{c}人 ({d}%)\n{b}'

						},
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				bar: {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '2%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						}, //去除网格线
						type: 'category',
						//				            data : "",

						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							interval: 0,
							rotate: -40
						}

					}],
					yAxis: [{
						//				        	name : '百分比',
						//				        	splitLine:{show: false},//去除网格线
						type: 'value',
						axisLabel: {
							textStyle: {
								fontSize: 16,
							},
							formatter: '{value} '
						},

					}],
					series: [{
						name: '数据',
						type: 'bar',
						barWidth: '20%',
						//				            data:"",
						//				            data:[10, 52, 200, 334, 390, 330, 220,100, 152, 200, 334, 390, 330, 220]
						label: {
							"normal": {
								"show": true,
								"textStyle": {
									"fontSize": 12
								},
								formatter: '{c} '
							},
						},
					}]
				},

			}
		},
		created() {
			this.xkpkyear = sessionStorage.getItem('xkpkyear');
			this.xkpkschool = sessionStorage.getItem('xkpkschool');
			this.xkpkgrade = sessionStorage.getItem('xkpkgrade');
			this.xkpkstarttime = sessionStorage.getItem('xkpkstarttime');
			this.xkpkendtime = sessionStorage.getItem('xkpkendtime');
			this.handleListApproveHistory()

		},
		methods: {
			getsubnum: function() {
				this.xkpksubnumselect = 11
				this.pie.series[0].data = [{
						value: 201,
						name: '物化生',
					},
					{
						value: 256,
						name: '历地政'
					},
					{
						value: 249,
						name: '物化地'
					},
				]
				this.pie1.series[0].data = [{
						value: 158,
						name: '地理',
					},
					{
						value: 172,
						name: '化学'
					},
					{
						value: 191,
						name: '物理'
					},
					{
						value: 155,
						name: '生物'
					},
					{
						value: 136,
						name: '政治'
					},
					{
						value: 165,
						name: '历史'
					},
				]
				this.bar.series[0].data = [{
						value: 158,
						name: '地理',
					},
					{
						value: 172,
						name: '化学'
					},
					{
						value: 191,
						name: '物理'
					},
					{
						value: 155,
						name: '生物'
					},
					{
						value: 136,
						name: '政治'
					},
					{
						value: 165,
						name: '历史'
					},
				]

				this.bar.xAxis[0].data = ['地理', '化学', '物理', '生物', '政治', '历史']
				this.drawPie()
				this.drawPie1()
				this.drawBar()

			},
			xkpkradioselect: function() {},
			btnback: function() {
				this.$router.back(-1)
			},
			xkpkcheckboxselect: function() {},
			xkpkclassChange: function() {},
			combinationChange: function() {},
			search: function() {},
			xkpkedit: function() {
			},
			pageChange: function(value) {
				this.xkpkdetailList = []
				this.current = value;
			},
			daoru: function() {},
			daochu: function() {},
			handleListApproveHistory: function() {

				// 保存取到的所有数据
				this.ajaxHistoryData = this.xkpkdetailList
				this.recordCount = this.xkpkdetailList.length;
				// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
				if(this.xkpkdetailList.length < this.pageSize) {
					this.xkpkdetailList = this.ajaxHistoryData;
				} else {
					this.xkpkdetailList = this.ajaxHistoryData.slice(0, this.pageSize);
				}

			},
			pageChange: function(index) {
				var _start = (index - 1) * this.pageSize;
				var _end = index * this.pageSize;
				this.xkpkdetailList = this.ajaxHistoryData.slice(_start, _end);
			},
			xkpksubnumselectChange: function() {
				this.getsubnum()
			},
			drawPie() {
				this.$nextTick(function() {
					let myChart = this.$echarts.init(this.$refs.pie, 'hengyi')
					myChart.clear();
					myChart.setOption(this.pie);
				})
			},
			drawPie1() {
				this.$nextTick(function() {
					let myChart1 = this.$echarts.init(this.$refs.pie1, 'hengyi')
					myChart1.clear();
					myChart1.setOption(this.pie1);
				})
			},
			drawBar() {
				this.$nextTick(function() {
					let myChart2 = this.$echarts.init(this.$refs.bar, 'hengyi')
					myChart2.clear();
					myChart2.setOption(this.bar);
				})
			},
			changeman:function(){
				if(document.getElementById('man').style.backgroundColor!='white'){
					document.getElementById('man').style.backgroundColor='white'
					this.show=false
				}
				else{
					document.getElementById('man').style.backgroundColor='#97B2E9'
					this.show=true
				}
			},
			changewoman:function(){
				if(document.getElementById('woman').style.backgroundColor!='white'){
					document.getElementById('woman').style.backgroundColor='white'
					this.show1=false
				}
				else{
					document.getElementById('woman').style.backgroundColor='#0077AA'
					this.show1=true
				}
			},
			

		},
		mounted() {

		}
	}
</script>

<style lang="css" scoped>
div.progressContainer{
          height: 20px;
          width: 80%;
          
          background-color: #ddd;
          margin-left: 2%;
}
div.progress{
            background-color: #97B2E9;
          
            height:20px;
            line-height: 20px;
}
div.progress2{
            background-color: #0077AA;
          
            height:20px;
            line-height: 20px;
}
b{
              color:#fff;
              font-weight: 100;
              font-size: 12px;
              position:absolute;
	      left:40%; 
 }

</style>